<script setup lang='ts' name="protocol-management-list">
import ExpandBtn from '@/components/expand-btn.vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

import ExpandRow from './expand.vue'
import Reject from './reject.vue'
import SendGoods from './send-goods.vue'

const props = withDefaults(defineProps<{
    data: any[]
    loading?: boolean
    total?: number
}>(), {
    data: () => [],
    loading: false,
    total: 0,
})
const emits = defineEmits(['doAction', 'pageChange'])
const router = useRouter()
const { data, total } = toRefs(props)

const rejectVisible = ref<boolean>(false)

const rejectId = ref('')

const sendGoodVisible = ref<boolean>(false)

const sendGoodId = ref('')

const state = {
    page: 1,
    size: 10,
}

const pages = ref({ ...state })

const orderStatusMap = {
    1: '草稿',
    2: '待审核',
    3: '待接单',
    4: '待支付',
    5: '供货中',
    6: '已完成',
    7: '已全部验收',
    8: '已关闭',
    9: '已拒绝',
    10: '已作废',
    11: '拒单待审核',
    12: '已撤回',
}

function doAction(item: any, row: any) {
    emits('doAction', item, row)
}

function handleSizeChange(val: any) {
    console.log('size', val)
    pageChange()
}
function handleCurrentChange(val: any) {
    console.log('page', val)
    pageChange()
}

function pageChange() {
    emits('pageChange', { ...pages.value })
}

function checkChange(e: any, item: any) {
    console.log('1', e)
    console.log('2', item)
}

function getOrders(id: string) {
    router.push(`/supplier-pages/order-management/sales-order/${id}`)
}

function rejectOrders(id: string) {
    rejectId.value = id
    rejectVisible.value = true
}

function sendGood(id: string) {
    sendGoodId.value = id
    sendGoodVisible.value = true
}

function showGetOrders(row: any) {
    return row.orderStatus === 3 && row.supplierOperable === 1
}

function showSendGood(row: any) {
    return row.orderStatus === 5 && row.supplierOperable === 1
}
</script>

<template>
    <el-skeleton v-if="loading"
                 animated
    />

    <template v-else-if="data.length">
        <div v-for="(item, index) in data"
             :key="index"
             class="protocol-list"
        >
            <p class="top">
                <span class="top-label truncate"
                      :title="item.createTime"
                >下单时间：{{ item.createTime }}</span>

                <span class="top-label truncate"
                      :title="item.orderNo"
                >订单编号：{{ item.orderNo }}</span>

                <span class="top-label truncate"
                      :title="item.agreementName"
                >合同名称：{{ item.agreementName }}</span>

                <span class="top-label truncate"
                      :title="item.agreementCode"
                >合同编号：{{ item.agreementCode }}</span>
            </p>

            <p class="col-title">
                <span>{{ item.orderName }}</span>

                <span class="col-tips ml-10 cursor-pointer"
                      @click="getOrders(item.id)"
                >
                    <el-icon>
                        <ArrowRight />
                    </el-icon>
                </span>
            </p>

            <div class="list-content">
                <div class="check-col">
                    <el-checkbox v-model="item.checked"
                                 @change="checkChange($event, item)"
                    />
                </div>

                <div class="list-row">
                    <div class="list-col">
                        <p class="truncate"
                           :title=" item.projectName"
                        >
                            项目：<span>{{ item.projectName }}</span>
                        </p>

                        <p class="truncate"
                           :title=" item.partyA"
                        >
                            甲方：<span>{{ item.partyA }}</span>
                        </p>
                    </div>

                    <div class="list-col">
                        <p>{{ orderStatusMap[item.orderStatus] || '' }}</p>
                    </div>

                    <div class="list-col">
                        <p>来源：<span>{{ item.orderSource }}</span></p>
                    </div>

                    <div class="list-col col-price">
                        <p>总价：<span>{{ `￥${item.totalPrice.toFixed(2)}` }}元</span></p>

                        <p>{{ `共${item.totalQuantity}个商品` }}</p>
                    </div>

                    <div class="list-col flex flex-col gap-10 items-center">
                        <template v-if="showGetOrders(item)">
                            <ElButton type="primary"
                                      size="small"
                                      @click="getOrders(item.id)"
                            >
                                查看并接单
                            </ElButton>

                            <ElButton type="primary"
                                      size="small"
                                      @click="rejectOrders(item.id)"
                            >
                                拒绝订单
                            </ElButton>
                        </template>

                        <ElButton v-if="showSendGood(item)"
                                  type="primary"
                                  size="small"
                                  @click="sendGood(item.id)"
                        >
                            立即发货
                        </ElButton>
                    </div>
                </div>
            </div>

            <div v-if="item?.deliveryNoteVOS && item?.deliveryNoteVOS.length"
                 class="expand-row"
            >
                <p style="padding-left:5px;line-height: 32px;">
                    <ExpandBtn v-model="item.expand" />
                </p>

                <ExpandRow v-if="!item.expand"
                           :data="item?.deliveryNoteVOS"
                           @do-action="doAction($event, item)"
                />
            </div>
        </div>
    </template>

    <div v-else
         style="text-align: center;"
    >
        暂无数据
    </div>

    <el-pagination v-model:current-page="pages.page"
                   v-model:page-size="pages.size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total"
                   small
                   background
                   mt-20
                   flex
                   justify-end
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
    />

    <Reject :key="rejectId"
            v-model:id="rejectId"
            v-model:visible="rejectVisible"
    />

    <SendGoods :key="sendGoodId"
               v-model:id="sendGoodId"
               v-model:visible="sendGoodVisible"
    />
</template>

<style lang="less" scoped>
@bg-color: #f5f6fa;
@label-color: gray;

.protocol-list {
    width: 100%;
    border: 1px solid @bg-color;
    border-radius: 4px;
    margin-bottom: 20px;

    .top {
        width: 100%;
        background: @bg-color;
        color: #000;
        padding-left: 20px;

        .top-label {
            display: inline-block;
            color: @label-color;
            line-height: 35px;
            margin-right: 16px;
            width: 250px;
        }
    }

    .col-title {
        font-size: 14px;
        font-weight: 600;
        color: #000;
        padding: 10px 60px 0;

        .col-tips {
            .el-icon {
                color: @label-color;
                border: 1px solid @label-color;
                border-radius: 8px;
                padding: 2px;
                transform: translateY(2px);
                margin-right: 10px;
            }

            .col-txt {
                font-size: 12px;
                color: #4771f6;
                background: @bg-color;
                padding: 3px 5px;
                border-radius: 4px;
            }
        }
    }

    .list-content {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0 24px 10px 0;

        .check-col {
            width: 60px;
            text-align: center;
        }

        .list-row {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .list-col {
                max-width: 200px;
                min-width: 200px;
                color: @label-color;
            }

            .col-price {
                text-align: right;

                span {
                    color: red;
                    font-size: 16px;
                    font-weight: 600;
                }
            }
        }
    }

    .expand-row {
        p {
            padding-left: 10px;
        }
    }
}

.el-button + .el-button {
    margin-left: 0;
}
</style>
